●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Dashboard card with total balance, quick stats, and a simple bar overview.
- Add expense form with amount InputText, wallet InputSelect, category chips, note textarea, and InputDate.
- Transactions list grouped by date with styled amounts and icons.
- Wallets list and a transfer sheet (modal/sheet) using InputSelect and InputNumber.
- Insights view with category totals, percentage bars, and mini monthly bars.
## Key components
- InputText, InputSelect<Guid?>, InputDate<DateTime>, InputNumber<decimal?>, InputTextArea
- RenderFragment-based views (Dashboard, AddExpense, Transactions, Wallets, Insights)
- EventCallback.Factory.Create handlers and controlled inputs (Value + ValueChanged)
- Local models: WalletModel, TransactionModel, CategoryModel
## How it works
- View switching uses a local enum (currentView) and methods that return RenderFragment.
- Form inputs use controlled binding via Value/ValueChanged; OnAmountChanged parses raw amount text into decimal.
- SubmitExpense validates via CanSubmitExpense, inserts a TransactionModel, updates wallet.Balance and navigates back to the dashboard.
- Transfer sheet validates CanTransfer, updates balances in memory, and shows transferError messages when checks fail.
## Styling
- Tailwind CSS utility classes implement layout, spacing, colors, rounded corners and responsive behavior (md:max-w-sm).
- FontAwesome icons are used across category chips, wallets, and controls.
- UI is optimized for a mobile-style single-column panel with fixed bottom navigation and an overlay sheet for transfers.
## Reuse steps
1. Add Tailwind CSS and FontAwesome to the Blazor project and include WalletApp.razor and FinanceModels.cs.
2. Add model namespaces to _Imports.razor and register any persistence services (e.g., a wallet/transaction service) for DI.
3. Copy the RenderFragment views; replace in-memory lists with injected services or API calls and adapt ID handling.
4. Optionally wrap form sections with EditForm and DataAnnotationsValidator to enable model-level validation and validation messages.
## Limitations & next steps
- Single-page, in-memory demo generated by Instruct UI; no persistent storage, authentication, or server API wiring is included.
- Validation currently uses manual checks (CanSubmitExpense/CanTransfer); add EditForm + DataAnnotations for automatic validation UI.
- Consider extracting UI pieces (CategoryChip, WalletCard, TransactionRow), adding unit/UI tests, localization, currency formatting, and backend sync.